<template>
  <div class="container">
    <div class="header">
      <img src="../../../public/wei.png" alt="" />
      <div>
        <p>坚持打卡</p>
        <p>你还不是会员,开启立享超多特权</p>
      </div>
    </div>
    <div class="body">
      <div class="body1">
        <div class="box">
          <div class="biaoqian">首月优惠</div>
          <p class="title">连续包月首月</p>
          <p class="price">￥9</p>
          <p class="youhui">￥19</p>
        </div>
        <div class="box">
          <div class="biaoqian">首季优惠</div>
          <p class="title">连续包月首月</p>
          <p class="price">￥35</p>
          <p class="youhui">￥58</p>
        </div>
        <div class="box">
          <div class="biaoqian1">7天挑战卷</div>
          <p class="title">连续包月首月</p>
          <p class="price1">￥168</p>
          <p class="youhui">￥248</p>
        </div>
        <div class="box">
          <div class="biaoqian">首季优惠</div>
          <p class="title">连续包月首月</p>
          <p class="price">￥258</p>
          <p class="youhui">￥308</p>
        </div>
      </div>
      <div class="xufei">
        <span>到期按19元/月自动续费，可随时取消</span>
        <div>
          <span>开通前请阅读</span>
          <a href="">《会员服务协议》</a>
        </div>
      </div>
      <div>
        <button class="btn" @click="visibie = true">确认协议并开通</button>
      </div>
      <div class="zhibo">
        <div>
          <p>直播畅想卡</p>
          <p>无限跟练全部直播课(单车)</p>
        </div>
        <div>
          <button>立即开通</button>
        </div>
      </div>
      <div class="lianhe">
        <span>联合会员</span>
      </div>
      <div class="huiyuan">
        <div class="card">
          <p>GoGo 大会员</p>
          <p>免费试听会员月换</p>
          <div class="footer">
            <span>￥128</span>
            <span>￥718</span>
            <span>立即开通 ></span>
          </div>
        </div>
        <div class="card1">
          <p>Keep × 南方周末</p>
          <p>联合会员买1得8</p>
          <div class="footer">
            <span>￥169</span>
            <span>￥360</span>
            <span>立即开通 ></span>
          </div>
        </div>
        <div class="card2">
          <p>Keep × 南方周末</p>
          <p>联合会员买1得8</p>
          <div class="footer">
            <span>￥178</span>
            <span>￥318</span>
            <span>立即开通 ></span>
          </div>
        </div>
      </div>
      <div class="lianhe">
        <span>优惠购买会员</span>
      </div>
      <div class="buyhuiyuan">
        <div class="card">
          <img src="" alt="" />
          <span>免费领</span>
          <span>6个月视听会员</span>
        </div>
        <div class="card1">
          <img src="" alt="" />
          <span>移动用户</span>
          <span>免费领会员</span>
        </div>
      </div>
    </div>
  </div>
  <van-popup
    v-model:show="visibie"
    position="bottom"
    @click-overlay="onClickOverlay"
  >
    <div class="whole">
      <div class="pay">
        <div class="header">
          <div>
            <div class="pay">应付金额</div>
            <div class="payNum"><span style="font-size: 34px">￥</span>18</div>
          </div>
        </div>
        <div class="listPay">
          <uni-icons
            type="weixin"
            size="60px"
            color="#00aa00"
            style="margin-left: 30px"
          ></uni-icons>
          <div class="text">
            <div class="">
              <img
                src="../public/微信图标.jpg"
                alt=""
                style="width: 50px; height: 50px"
              />
            </div>
            <div>
              <div class="wx">
                <span> 微信支付</span>
                <span>(推荐)</span>
              </div>
            </div>
          </div>
          <div class="btn1">
            <label class="radio">
              <radio
                value="1"
                :checked="boolWx"
                color="#FFCC33"
                style="transform: scale(0.7)"
                @click="changePayType(1)"
              />
            </label>
          </div>
        </div>
        <div class="listPay">
          <uni-icons
            type="weibo"
            size="60px"
            color="#ff5500"
            style="margin-left: 30px"
          ></uni-icons>
          <div class="text">
            <img
              src="../public/线下支付.jpg"
              alt=""
              style="width: 50px; height: 50px"
            />
            <div class="wx">线下支付(到付)</div>
          </div>
          <div class="btn1">
            <label class="radio">
              <radio
                value="2"
                :checked="boolWb"
                color="#FFCC33"
                style="transform: scale(0.7)"
                @click="changePayType(3)"
              />
            </label>
          </div>
        </div>
        <div class="bootom">
          <button type="warn" style="color: #fff" @click="confirm">
            <p>确认支付</p>
          </button>
        </div>
      </div>
    </div>
  </van-popup>
  <van-popup v-model:show="submiting1" @click-overlay="onClickOverlay1">
    <img src="../public/收款码.png" alt="" />
    <span class="shouldpay">应付款￥{{ price }}</span>
    <button @click="successorder()" style="background-color: aqua">
      支付完成
    </button>
  </van-popup>
</template>

<script setup>
import { ref } from "vue";
import router from '../router/index.js'
const visibie = ref(false);
const boolWx = ref(true);
const boolWb = ref(false);
const price = ref(0); //支付金额
const payType = ref(1); //支付类型
const submiting = ref(false); //控制再次确认支付的弹出框
const submiting1 = ref(false); //控制再次确认支付的弹出框
const changePayType = (type) => {
  if (1 == type) {
    boolWx.value = true;
    boolWb.value = false;
  } else {
    boolWx.value = false;
    boolWb.value = true;
  }
  payType.value = type;
  console.log(payType.value, "this.payType");
};
// 支付页面取消
const onClickOverlay = () => {
  visibie.value = false;
};
const onClickOverlay1 = () => {
  visibie.value = false;
};
const confirm = () => {
  // 线下支付
  if (3 === payType.value) {
    router.push("/paying");
  } else if (1 === payType.value) {
    //微信支付
    submiting1.value = true;
  }
};
// 微信支付完成
const successorder = () => {
  router.push("/paying");
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
.container {
  height: 100vh;
  background-color: #5a4d66;
}
.header {
  display: flex;
  img {
    width: 45px;
    border-radius: 50%;
    background-color: white;
    margin: 28px;
    margin-right: 20px;
  }
  p:nth-child(1) {
    margin-top: 30px;
    color: white;
    font-size: 16px;
    font-weight: bold;
  }
  p:nth-child(2) {
    color: #dab179;
    margin-top: 5px;
    font-size: 14px;
  }
}
.body {
  height: 100vh;
  background-color: #f9f9f9;
  border-radius: 10px;
}
.body1 {
  display: flex;
  overflow-x: auto;
  height: 200px;
  width: 98%;
  .box {
    margin-top: 30px;
    margin-left: 10px;
    width: 130px;
    height: 150px;
    background-color: white;
    flex: none;
    border-radius: 10px;
    text-align: center;
    // border: 3px solid #dbb27a;
    position: relative;
    .biaoqian {
      width: 80px;
      height: 23px;
      position: absolute;
      top: -8%;
      left: -2%;
      background-color: #dbb27a;
      border-top-left-radius: 10px;
      border-bottom-right-radius: 10px;
    }
    .biaoqian1 {
      width: 80px;
      height: 23px;
      position: absolute;
      top: -8%;
      left: -2%;
      color: white;
      // background-color: red;
      background: linear-gradient(to right, #fa6167, #f4a18a);
      border-top-left-radius: 10px;
      border-bottom-right-radius: 10px;
    }

    .title {
      font-weight: bold;
      margin-top: 30px;
    }
    .price {
      font-size: 40px;
      margin-top: 10px;
      color: #dbb27a;
      font-weight: bold;
    }
    .price1 {
      font-size: 40px;
      margin-top: 10px;
      color: #fa6167;
      font-weight: bold;
    }
    .youhui {
      text-decoration: line-through;
      color: #b3afa3;
    }
  }
}
.box:hover {
  border: 2px solid #dbb27a;
  background-color: #f8f4e8;
}
.xufei {
  height: 30px;
  span {
    color: #b3afa3;
    margin-left: 10px;
  }
  a {
    text-decoration: none;
    color: green;
  }
}
.btn {
  width: 94%;
  height: 60px;
  margin-top: 50px;
  margin-left: 10px;
  font-size: 20px;
  border-radius: 30px;
  border: none;
  background: linear-gradient(to right, #cda372, #e6c688);
}
.zhibo {
  width: 94%;
  height: 80px;
  margin-left: 10px;
  background: linear-gradient(to right, #abb2f8, #907af8, #abb2f8);
  border-radius: 10px;
  margin-top: 20px;
  display: flex;
  position: relative;
  p:nth-child(1) {
    font-size: 20px;
    color: white;
    margin: 10px;
  }
  p:nth-child(2) {
    margin-left: 10px;
    color: white;
  }
  button {
    width: 80px;
    height: 30px;
    border-radius: 15px;
    border: none;
    background: linear-gradient(to right, white, #d4b9fc);
    position: absolute;
    left: 70%;
    top: 30%;
  }
}
.lianhe {
  margin: 10px;
  span {
    font-weight: bold;
  }
}
.huiyuan {
  margin: 10px;
  display: flex;
  overflow-x: auto;
  height: 140px;
  .card {
    flex: none;
    width: 170px;
    height: 120px;
    border-radius: 10px;
    background: linear-gradient(to right, #fd581c, #e98d63);
    p:nth-child(1) {
      margin: 10px;
      color: white;
      height: 30px;
    }
    p:nth-child(2) {
      font-size: 12px;
      margin: 10px;
      color: white;
      height: 20px;
    }
  }
  .card1 {
    border-radius: 10px;
    margin-left: 10px;
    flex: none;
    width: 170px;
    height: 100px;
    background: linear-gradient(to right, #8558e5, #a078f5);
    p:nth-child(1) {
      margin: 10px;
      color: white;
      height: 20px;
    }
    p:nth-child(2) {
      margin: 10px;
      font-size: 12px;
      color: white;
      height: 30px;
    }
  }
  .card2 {
    border-radius: 10px;
    margin-left: 10px;
    flex: none;
    width: 170px;
    height: 120px;
    background: linear-gradient(to right, #fb7e8a, #a078f5);
    p:nth-child(1) {
      margin: 10px;
      color: white;
      height: 30px;
    }
    p:nth-child(2) {
      margin: 10px;
      font-size: 12px;
      color: white;
      height: 20px;
    }
  }
  .footer {
    height: 40px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    background-color: white;
    display: flex;
    align-items: center;
    border: 1px solid rgb(228, 225, 225);
    span:nth-child(1) {
      font-size: 14px;
      font-weight: bold;
    }
    span:nth-child(2) {
      font-size: 10px;
      text-decoration: line-through;
      color: #b3afa3;
      margin-left: 10px;
    }
    span:nth-child(3) {
      margin-left: 10px;
      font-size: 10px;
      color: #b3afa3;
    }
  }
}
.buyhuiyuan {
  margin: 10px;
  display: flex;
  overflow-x: auto;
  height: 150px;
  .card {
    flex: none;
    width: 200px;
    height: 120px;
    border-radius: 10px;
    background: linear-gradient(to right, #8558e5, #a078f5);
    span:nth-child(2) {
      margin: 10px;
      color: white;
      margin-left: 40px;
      font-size: 20px;
      display: block;
    }
    span:nth-child(3) {
      margin: 10px;
      color: white;
      height: 30px;
      font-size: 20px;
    }
  }
  .card1 {
    border-radius: 10px;
    margin-left: 10px;
    flex: none;
    width: 200px;
    height: 120px;
    background: linear-gradient(to right, #fd581c, #e98d63);
    span:nth-child(2) {
      margin: 10px;
      color: white;
      margin-left: 40px;
      font-size: 20px;
      display: block;
    }
    span:nth-child(3) {
      margin: 10px;
      color: white;
      height: 30px;
      font-size: 20px;
      margin-left: 30px;
    }
  }
}
.bootom {
  height: 80px;
  margin: auto;
  margin-bottom: 20px;
  button {
    width: 100%;
    height: 60%;
    background-color: green;
    p {
      align-items: center;
    }
  }
}
.whole {
  // background-color: $bgColor;
  display: flex;
  justify-content: center;

  .header {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-wrap: wrap;
    height: 100px;

    .pay {
      width: 100%;
      color: #717171;
    }

    .payNum {
      width: 100%;
      font-size: 44px;
      margin: 10px 0px 20px;
    }
  }

  .pay {
    width: 100%;

    .listPay {
      height: 80px;
      display: flex;
      align-items: center;

      .uni-icons {
        margin-left: 20px;
      }

      .text {
        display: flex;
        width: 40%;
        margin: 0px 20px 0px;
        .wx {
          margin-top: 10px;
        }
      }

      .btn {
        width: 40%;
        text-align: right;
      }
    }
  }
}
</style>